/*
 *@author: YangJie
 *@date: 2021-04-07 16:48:13
 *@version:
 *@description:维修保养=>故障报修
 */
import React, { Component } from 'react';
import { Table, Button, Form, Card, Tabs } from 'antd';
import '@/assets/css/settings';
import BasicForm from '../../components_yyr/common/basicForm';
import BasicDrawers from "../../components_yyr/common/basicDrawers";
import { FileDown } from '../../components_yyr/commponent/File';
import Paging from '../../components_yyr/commponent/Paging';
import BasicConfirm from '../../components_yyr/common/basicConfirm';
const { TabPane } = Tabs;

const dataSourceDemo = [
	{
		key: 1,
		revise: '修改',
		manage: '管理图片',
		equipmentType: '',
		maintenanceParts: '电瓶电解液111',
		maintenanceStandard: '数量、比重及清洁'
	},
	{
		key: 2,
		revise: '修改',
		manage: '管理图片',
		equipmentType: '',
		maintenanceParts: '电瓶电解液222',
		maintenanceStandard: '数量、比重及清洁'
	},
	{
		key: 3,
		revise: '修改',
		manage: '管理图片',
		equipmentType: '',
		maintenanceParts: '电瓶电解液333',
		maintenanceStandard: '数量、比重及清洁'
	},
	{
		key: 4,
		revise: '修改',
		equipmentType: '',
		maintenanceParts: '电瓶电解液444',
		maintenanceStandard: '数量、比重及清洁'

	}
];
const mainFactoryList = {
	//设备类别
	sblb: [
		{ value: 'wqw', title: 'wqw', children: [{ value: 'wdwd', title: 'wdwd' },] },
		{ value: 'dwdw ', title: 'dwdw ' },
		{ value: '模温机 ', title: '模温机 ', children: [{ value: '温控卡', title: '温控卡' },] },
		{ value: '锅炉 ', title: '锅炉 ' },],
};
class App extends Component {
	state = {
		loading: false, //加载中...
		dataSource: dataSourceDemo, //数据源
		drawerVisible: false, //新增修改抽屉的显示与隐藏
		chooseData: {},
		drawerTitle: '',
		total: 0,
		formValues: {},
		cityData: [],
		mainFactoryList: mainFactoryList,
		selectedData: [],
		selectedKeys: [],
	};
	componentDidMount() {
		this.fetch({
			pageNum: 1,
			pageSize: 10
		});
		// this.getInfo();
	}
	//初始化加载数据
	fetch = data => {
		// this.setState({ loading: true })
		// this.post('/airCargo/pageList',{data}).then(res => {
		// 	this.setState({
		// 		loading: false,
		// 		dataSource: res.data.data,
		// 		total:res.data.total,
		// 		formValues:data
		// 	});
		// })
	};
	getInfo = () => {
		this.post('/carrierPrice/mainFactoryList').then(res => this.setState({ mainFactoryList: res.data })); //主机厂
	};

	//表单查询
	filterSubmit = values => {
		console.log("表单查询=====", values)

		values.pageNum = this.state.formValues.pageNum;
		values.pageSize = this.state.formValues.pageSize;
		this.fetch(values);
	};

	// 表格删除
	handleConfirm = (value, api, chooseData) => {
		console.log("表格删除=====", chooseData)
		let newDataSource = [];
		for (let i of this.state.dataSource) {
			let flag = true;
			for (let j of chooseData) {
				if (j.key == i.key) {
					flag = false;
					break;
				}
			}
			if (flag) {
				newDataSource.push(i);
			}
		}
		this.setState({
			dataSource: newDataSource,
			selectedKeys: [],
			selectedData: []
		})


		if (api === 1) {
			this.get(`/airCargo/delAirCargo?id=${chooseData.id}`).then(res => {
				this.success();
				this.fetch({ ...this.state.formValues });
			});
		}
	};

	formList = () => {
		const formList = [
			{
				type: 'SELECT', label: '设备类别', field: 'equipmentType', name: 'value',
				list: [{ id: 1, value: 'wqw' }, { id: 2, value: 'dwdw' }], valueField: 'value'
			},
			{ type: 'INPUT', label: '保养部位', field: 'maintenanceParts' },
			{ type: 'INPUT', label: '保养标准', field: 'maintenanceStandard' }
		];
		return formList;
	};
	drawerFormList = data => {
		const { mainFactoryList } = this.state;
		const drawerFormList = [
			{ type: 'TREESELECT', label: '设备类别', field: 'equipmentType', initialValue: data.equipmentType, list: mainFactoryList.sblb, valueField: 'value', name: 'title' },
			{ type: "BOTTOM", label: "添加明细", field: "harborMinimumPrice", initialValue: data.harborMinimumPrice },
			{ type: "TABLE", label: "", field: "harborMinimumPrice", initialValue: data.harborMinimumPrice },
		];
		return drawerFormList;
	};

	// 提交modal
	handleSubmit = data => {
		const { dataSource, chooseData } = this.state;
		let key = chooseData.key;
		let newDataSource = dataSource;
		let index = newDataSource.findIndex((value) => value.key == key);
		if (key) {
			console.log("******修改******")
			for (let j of newDataSource) {
				if (j.key == key) {
					newDataSource[index] = { ...newDataSource[index], ...data }
				}
			}
		} else {
			console.log("******添加******")
			newDataSource.push(data);
		}
		this.setState({
			dataSource: newDataSource,
		})
		this.onClose();



		// 注释
		// const id = this.state.chooseData && this.state.chooseData.id;
		// if (id) {
		// 	data = Object.assign({}, data, { id: id });
		// 	data.updateId = localStorage.getItem('userId');
		// } else {
		// 	data.createId = localStorage.getItem('userId');
		// }
		// this.post('/airCargo/addAirCargo', { data }).then(res => {
		// 	this.success();
		// 	this.fetch({ ...this.state.formValues });
		// 	this.onClose();
		// });
	};

	// 打开modal，判断是修改还是新增 0新增 1修改
	handleModal = (type, data) => {
		if (type) {
			this.setState({
				drawerTitle: '修改',
				drawerVisible: true,
				chooseData: data
			});
		} else {
			this.setState({
				drawerTitle: '新增',
				drawerVisible: true
			});
		}
	};

	onClose = () => {
		this.setState({
			drawerVisible: false,
			chooseData: {}
		});
		this.modalRef.props.form.resetFields();
	};

	render() {
		const columns = [
			{
				title: '修改', width: 100, dataIndex: 'revise',
				render: (text, record) => {
					return <span><a href onClick={() => this.handleModal(1, record)}>详细</a>	</span>
				}
			},
			{
				title: '管理图片', width: 100, dataIndex: 'manage',
				render: () => (<span><a onClick={this.handleManage}>管理图片</a>	</span>)
			},
			{ title: '设备类型', width: 150, dataIndex: 'equipmentType' },
			{ title: '保养部位', width: 200, dataIndex: 'maintenanceParts' },
			{ title: '保养标准', width: 400, dataIndex: 'maintenanceStandard' }
		];

		const { chooseData, drawerVisible, drawerTitle, dataSource, loading, total, formValues, selectedData, selectedKeys } = this.state;

		const drawerProps = {
			onRef: ref => (this.modalRef = ref), visible: drawerVisible, width: 700, drawerFormList: this.drawerFormList(chooseData),
			submit: this.handleSubmit, onClose: this.onClose, title: drawerTitle
		};

		//选择框
		const rowSelection = {
			selectedRowKeys: selectedKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					selectedData: selectedRows,
					selectedKeys: selectedRowKeys
				})
			},
			getCheckboxProps: record => ({
				disabled: record.name === 'Disabled User',
				name: record.name
			})
		};

		return (
			<div className="shadow-radius">
				<Card>
					<BasicForm formList={this.formList()} filterSubmit={this.filterSubmit} labelSpan={8} wrapperSpan={12} onRef={ref => (this.child = ref)} />
				</Card>

				<Tabs
					tabBarExtraContent={
						<div className="buttonList">
							<Button icon="plus" onClick={() => this.handleModal(0, {})} type="primary">{' '}添加 </Button>
							{/* <Button icon="delete" onClick={() => this.handleModal(0, {})} type="primary">{' '} 删除</Button> */}
							<BasicConfirm title="确认删除?" api={1} icon="delete" button={true} buttonName="删除" data={selectedData} handleConfirm={this.handleConfirm} />
							{/* <FileDown fileName='设备台账模板' buttonName='模板下载' apiPath='/airCargo/carrierPriceExcel'/> */}
							<FileDown fileName="故障报修清单" buttonName="导出" method="post" apiPath="/airCargo/exportCarrierPriceDataExcel" data={formValues} />
							{/* <FileUpload buttonName='导入' apiPath='/airCargo/carrierPriceExcel' load={true} fetch={()=>this.fetch({...formValues})}/> */}

						</div>
					}
				>
					<TabPane tab="保养要求" key="1">
						<Table columns={columns} rowSelection={rowSelection} rowKey={(record, index) => index} dataSource={dataSource} pagination={false} loading={loading} scroll={{}} />
						<Paging total={total} formValues={formValues} fetch={pager => this.fetch(pager)} />
					</TabPane>
				</Tabs>

				<BasicDrawers {...drawerProps} />
			</div>
		);
	}
}
export default Form.create()(App);
